<template>
  <div v-loading="isLoading">
    <div class="weather_container">
      <div class="BAC-title" style="height: 68px;font-size: 24px;">水上桥区管控专题</div>
      <div class="filter">
        <van-field
          v-model="city"
          is-link
          arrow-direction="down"
          readonly
          label=""
          placeholder="请选择"
          class="selectClass"
          @click="showPicker = true"
        />
        <van-field
          v-model="year"
          is-link
          arrow-direction="down"
          readonly
          label=""
          class="selectClass"
          placeholder="请选择"
          @click="showYearPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            title=""
            :columns="cityOptions"
            :columns-field-names="customFieldName"
            @cancel="showPicker = false"
            @confirm="confirmFunction"
          />
        </van-popup>
        <van-popup v-model:show="showYearPicker" round position="bottom">
          <van-date-picker
            v-model="currentDate"
            title="请选择"
            :min-date="new Date(2022, 0, 1)"
            :max-date="new Date(2024, 11, 31)"
            :columns-type="columnsType"
            @cancel="showYearPicker = false"
            @confirm="confirmYear"
          />
        </van-popup>
      </div>
      <div class="content-container">
        <div class="content">
          <div class="title">温度统计 (℃)</div>
          <div id="lineChart1" class="echarts"></div>
        </div>
        <div class="content">
          <div class="title">风向统计 (m/s)</div>
          <div id="lineChart2" class="echarts"></div>
        </div>
        <div class="content">
          <div class="title">降水量统计 (mm)</div>
          <div id="lineChart3" class="echarts"></div>
        </div>
        <div class="content">
          <div class="title">气压统计 (atm)</div>
          <div id="lineChart4" class="echarts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

// 引入api
import {
  getProvince, //获取市
  weatherStat, //气象统计
} from "../../../utils/bridgeAreaControlApi";

const city = ref("");
const showPicker = ref(false);
const isLoading = ref(false);
const customFieldName = {
  text: "city",
  value: "city",
};
const confirmFunction = ({ selectedOptions }) => {
  city.value = selectedOptions[0].city;
  weatherStatFunction();
  showPicker.value = false;
};

const cityOptions = ref([]);
const getProvinceFunction = () => {
  getProvince().then((res) => {
    if (res.code === 200) {
      cityOptions.value = res.data;
      city.value = "中山";
      weatherStatFunction();
    }
  });
};

const year = ref("2024");
const currentDate = ref(["2024"]);
const columnsType = ["year"];
const showYearPicker = ref(false);
const confirmYear = (val) => {
  year.value = val.selectedValues[0];
  weatherStatFunction();
  showYearPicker.value = false;
};
const xAxisData1 = ref([]);
const xAxisData2 = ref([]);
const xAxisData3 = ref([]);
const xAxisData4 = ref([]);
const seriesData1 = ref([]);
const seriesData2 = ref([]);
const seriesData3 = ref([]);
const seriesData4_1 = ref([]);
const seriesData4_2 = ref([]);
const weatherStatFunction = () => {
  isLoading.value = true;
  weatherStat({ city: city.value, year: year.value })
    .then((res) => {
      xAxisData1.value = [];
      seriesData1.value = [];
      xAxisData2.value = [];
      seriesData2.value = [];
      xAxisData3.value = [];
      seriesData3.value = [];
      xAxisData4.value = [];
      seriesData4_1.value = [];
      seriesData4_2.value = [];
      if (res.code === 200) {
        res.data.temp.forEach((item1) => {
          xAxisData1.value.push(item1.ny);
          seriesData1.value.push(item1.temperature);
        });
        res.data.wind.forEach((item2) => {
          xAxisData2.value.push(item2.ny);
          seriesData2.value.push(item2.windSpeed);
        });
        res.data.water.forEach((item3) => {
          xAxisData3.value.push(item3.ny);
          seriesData3.value.push(item3.water);
        });
        res.data.press.forEach((item4) => {
          xAxisData4.value.push(item4.ny);
          seriesData4_1.value.push(item4.pressure);
          seriesData4_2.value.push(item4.temperature);
        });
      }
      nextTick(() => {
        initLineChart1();
        initLineChart2();
        initLineChart3();
        initLineChart4();
      });
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const initLineChart1 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart1")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart1"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "35px",
      right: "30px",
      bottom: "45px",
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 10,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      data: xAxisData1.value,
      // name: "月份",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "10px",
        color: "rgba(0,0,0,0.45)",
      },
      axisLabel: {
        interval: 0,
        rotate: -30, //倾斜的程度
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "温度(°C)",
        data: seriesData1.value,
        type: "line",
        color: "#6B9BFD",
      },
    ],
  };
  option && lineChart.setOption(option);
};
const initLineChart2 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart2")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart2"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "35px",
      right: "30px",
      bottom: "45px",
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 10,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      data: xAxisData2.value,
      // name: "月份",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "10px",
        color: "rgba(0,0,0,0.45)",
      },
      axisLabel: {
        interval: 0,
        rotate: -30, //倾斜的程度
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "风力(m/s)",
        data: seriesData2.value,
        type: "line",
        color: "#4ED9A0",
      },
    ],
  };
  option && lineChart.setOption(option);
};
const initLineChart3 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart3")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart3"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "35px",
      right: "30px",
      bottom: "45px",
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 10,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      data: xAxisData3.value,
      // name: "月份",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "10px",
        color: "rgba(0,0,0,0.45)",
      },
      axisLabel: {
        interval: 0,
        rotate: -30, //倾斜的程度
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "降水(mm)",
        data: seriesData3.value,
        type: "line",
        color: "#6B9BFD",
      },
    ],
  };
  option && lineChart.setOption(option);
};
const initLineChart4 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart4")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart4"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "50px",
      right: "30px",
      bottom: "45px",
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 10,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      data: xAxisData4.value,
      // name: "月份",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "10px",
        color: "rgba(0,0,0,0.45)",
      },
      axisLabel: {
        interval: 0,
        rotate: -30, //倾斜的程度
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "最高气压(atm)",
        data: seriesData4_1.value,
        type: "line",
        color: "#6B9BFD",
      },
      {
        name: "最低气压(atm)",
        data: seriesData4_2.value,
        type: "line",
        color: "#4ED9A0",
      },
    ],
  };
  option && lineChart.setOption(option);
};

onMounted(() => {
  getProvinceFunction();
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.weather_container {
  height: 100vh;
  overflow: hidden;
  .filter {
    display: flex;
    margin: 0px 0px 16px 0px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 10;
    padding: 5px 20px;
    box-sizing: border-box;
    .selectClass {
      width: calc(50% - 5px);
    }
    .selectClass:nth-child(1) {
      margin-right: 10px;
    }
  }
  margin: 0 16px;
  .content-container {
    margin-top: 135px;
    overflow-y: scroll;
    height: calc(100vh - 68px - 80px);
  }
  .content {
    background: #ffffff;
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    .title {
      display: flex;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      font-size: 14px;
    }
    .echarts {
      height: 316px;
    }
  }
}
.BAC-title {
  width: 100%;
  font-size: 24px;
  line-height: 68px;
  background: rgba(49, 118, 233, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../../../static/images/bridgeAreaControl/bg_zhuanti.png")
    no-repeat;
  background-size: cover;
}
::v-deep.van-field {
  background-color: #f8f9fb;
  border-radius: 8px;
}
</style>
